<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京站智能网格化管理系统</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/common.css">
    <link rel="stylesheet" href="../lib/css/iconFont/iconfont.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/count.css"> -->
    <link rel="stylesheet" href="../lib/css/pagination.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/station.css"> -->
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/newcount.css">
</head>
<body>
<div class="station_grid wraper">
    <div class="searchwrap">
        <!-- 日期时间 -->
        <div class="searchelm searchtime1">
            <select name="grouptype" id="grouptype" class="select_option grouptype">
                <option value="1">部门</option>
                <option value="2">人员</option>
            </select>
            <div class="select2_wrap groupwrap" style="min-width:10rem;max-width:40%">
                <input type="hidden" id="userid" />
                <!-- <input type="hidden" id="userid" /> -->
                <div id="user" class="search_control groupselect tagselect" style="width:100%;"></div>
                <!-- <div class="groudtree"></div> -->
            </div>
            <input type="text" id="datetimepicker" class="search_control" name="ptime_start">
            <input type="text" id="datetimepicker2" class="search_control" name="ptime_end">
            <input type="button" value="查询" id="lookUp1" class="lookUp"/>
        </div>
        <!-- 图表导出 切换 -->
        <div class="tabbar clearfix">
            <ul class="tab">
                <li class="tab_li" id="export_file" data-rel="2"><i class="icon iconfont icon-daochu"></i>导出</li>
            </ul>
        </div> 
    </div>
    <!-- echarts统计图表 -->
    <div class="main_content">
        <!-- 人员表格 -->
        <div class="station_shaow_detail main_table_wrap nan">
            <table class="station_shaow_detail_table main_table">
                <caption style="font-size: 2.4rem;">接发车任务完成情况统计表</caption>
            </table>
            <div class="M-box1" style="font-size:10px;text-align:center;" id="page_string"></div>
        </div>
        <!-- 下钻信息表 -->
        <div class="station_shaow_detail drilldown" style="display:none">
            <div class="div_close">
                <p class="p_close"><a href="#" class="" style="">《&nbsp;返回</a></p>
            </div>
            <div class="drilldown_info">
                <!-- 明细表 -->
                <table class="station_shaow_detail_table drilldown_table">
                <caption style="font-size: 2.4rem;">接发车任务详情</caption>
                </table>
            </div>
            <div class="interim">
                <div class="M-box1" id="page_string1"></div>
            </div>
        </div>
        <div class="lds-css block">
            <div class="lds-dual-ring">
                <div></div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- <script type="text/javascript" src="/assets/js/jquery.1.10.1.js"></script> -->
<script type="text/javascript" src="../lib/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../lib/js/base.js"></script>
<script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
<script type="text/javascript" src="../lib/js/jquery.pagination.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/depchoice/edep_plugin.js"></script>
<script type="text/javascript" src="../lib/js/ztreeJs.js"></script>
<script type="text/javascript" src="../lib/js/count.js"></script>
<script type="text/javascript">
//查询
var page = 1,postDep='1',isDtail=false,common=1,detailUserId=''
$("#lookUp1").click(function () {
    common_request()    
});

//表格
function devicePostRepairTable(data){
    $('.lds-css').addClass('block')
    var _data = data
    $.ajax({
        url: serverUrl.base+serverUrl.count+'train_task',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.lds-css').removeClass('block')
            // 根据数据库取到结果拼接现在结果
            var _data = res.data
            $('.main_table').createTable({data:_data,columns:[
                {name:'序号',field:'',ids:1,w:'4rem'},
                {name:'部门',field:'department_name',w:'4rem'},
                {name:'人员',field:'user_name',w:'4rem'},
                {name:'岗位',field:'post_name',w:'4rem'},
                {name:'任务量',field:'all_num',w:'10rem'},
                {name:'完成量',field:'has_be_done_num',w:'10rem'},
                {name:'进行中任务数量',field:'be_done_num',w:'10rem'},
                {name:'已完成任务数量',field:'done_num',w:'10rem'},
                {name:'已过期任务数量',field:'overdue_num',w:'10rem'},
                {name:'详情',field:'user_id',w:'8rem',render:function(index,elm,data,tr){
                    var _btn = '<span class="black1 black_act detail" data-rel=\"'+ elm +'\">查看详情</span>',$btn = $(_btn)
                    return _btn
                }}
            ]})
            $('.detail').off('click.checkdetail').on('click.checkdetail',function(){
                common=1;
                isDtail=true
                detailUserId=$(this).data('rel');
                common_request()
                
            })
            $("#page_string").html(res.result_page);
        }
    });
}
//详细表
function deviceGridRepairTableDropDown(data){
    $('.lds-css').addClass('block')
    var _data = data
    //console.log(_data)
    $.ajax({
        url: serverUrl.base+serverUrl.count+'train_task_info',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.lds-css').removeClass('block')
            $('.main_table_wrap').hide()
            $('.ecahrts_style').hide()
            $('.drilldown').show()
            // 根据数据库取到结果拼接现在结果
            var _data = res.data
            $('.drilldown_table').createTable({data:_data,columns:[
                {name:'序号',field:'',ids:1,w:'4rem'},
                {name:'日期',field:'time',w:'4rem'},
                {name:'工号',field:'user_account',w:'4rem'},
                {name:'姓名',field:'user_name',w:'10rem'},
                {name:'部门',field:'department_name',w:'10rem'},
                {name:'岗位',field:'post_name',w:'10rem'},
                {name:'车次',field:'train_number',w:'10rem'},
                {name:'作业任务',field:'task_name',w:'10rem'},
                {name:'任务状态',field:'status',w:'8rem'}
            ]})
            $("#page_string1").html(res.result_page);
            
        }
    });
}
$('.div_close').on('click',function(){
    common=1;
    isDtail=false
    $('.drilldown').hide()
    $('.searchtime2').show()
    if(common == 1){
        $('.main_table_wrap').show()       
    }else{
        $('.mcharts').show()
    }
})

function common_request(elm){
    if(arguments[0]){
        page = arguments[0]
    }else{
        page = 1
    }
    var _data = {
        'page':page,
        'start':$('#datetimepicker').val(),
        'end':$('#datetimepicker2').val(),
        user_type:$('.grouptype').val(),
        user_ids:$('#userid').val().split(',')
    };
    if(isDtail){
        _data.user_id = detailUserId
        deviceGridRepairTableDropDown(_data)
    }else{
        if(common == 1){
            devicePostRepairTable(_data)
        }else if(common == 2){
            _data.status = 0
            deviceGridRepairChart(_data)
        }
        
    }
}
common_request()
//查询
function search_(){
    page = 1 ;
    common_request(1);  
}
//tab初始化
$('.tab .tab_li').each(function(index,elm){
    //console.log(index,elm)
    $(this).data('val',index)
})
//图表切换后的操作
$('.tab_li').on('click',function(elm){
    var $this = $(this)
    var _ids = $this.data('rel')?$this.data('rel'):$this.index()
    console.log(_ids)
   if(_ids== '0'){
        $(".educe").addClass("addli");
    }else if(_ids== '2'){
        //导出按钮    
        var _data = {
            'page':page,
            'start':$('#datetimepicker').val(),
            'end':$('#datetimepicker2').val(),
            user_type:$('.grouptype').val(),
            user_ids:$('#userid').val()
        };
        var _url=serverUrl.base + serverUrl.countD + 'train_task?start='+encodeURIComponent(_data.start)+'&end='+encodeURIComponent(_data.end)+'&user_type='+encodeURIComponent(_data.user_type)+'&user_ids='+encodeURIComponent(_data.user_ids)
        window.location.href = _url;return;
    }
})
$('.grouptype').on('change',function(){
    var $this = $(this)
    var type = $this.val()
    $('#user').html('')
    $('#userid').val('')
    if(type == '1'){
        //(id,uid,type,vid)
        showsDeptWin('user','userid','6',false)
    }else{
        showsDeptWin('user','userid','5',false)
    }
})
$('.groupwrap').on('click',function(){
    var type = $('.grouptype').val()
    if(type == '1'){
        //(id,uid,type,vid)
        showsDeptWin('user','userid','6',false)
    }else{
        showsDeptWin('user','userid','5',false)
    }
})

</script>
</html>

